body.theme-dark
  {$contentClass}
    code
      background var(--grey12)

  /**
   * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
   * Based on https://github.com/chriskempson/tomorrow-theme
   * @author Rose Pritchard
   */
  code[class*='language-'], pre[class*='language-']
    color #ccc
    background none
    font-family Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
    font-size 1em
    text-align left
    white-space pre
    word-spacing normal
    word-break normal
    word-wrap normal
    -moz-tab-size 4
    -o-tab-size 4
    tab-size 4
    -webkit-hyphens none
    -moz-hyphens none
    -ms-hyphens none
    hyphens none

  /* Code blocks */
  pre[class*='language-']
    overflow auto

  :not(pre) > code[class*='language-'], pre[class*='language-']
    background #2d2d2d

  /* Inline code */
  :not(pre) > code[class*='language-']
    padding 0.1em
    border-radius 0.3em
    white-space normal

  .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata
    color #999

  .token.punctuation
    color #ccc

  .token.tag, .token.attr-name, .token.namespace, .token.deleted
    color #e2777a

  .token.function-name
    color #6196cc

  .token.boolean, .token.number, .token.function
    color #f08d49

  .token.property, .token.class-name, .token.constant, .token.symbol
    color #f8c555

  .token.selector, .token.important, .token.atrule, .token.keyword, .token.builtin
    color #cc99cd

  .token.string, .token.char, .token.attr-value, .token.regex, .token.variable
    color #7ec699

  .token.operator, .token.entity, .token.url
    color #67cdcc

  .token.important, .token.bold
    font-weight bold

  .token.italic
    font-style italic

  .token.entity
    cursor help

  .token.inserted
    color green

  // hightlight
  div[class*='language-']
    .highlight-lines
      .highlighted
        background darken(saturate($darkCodeBgColor, 10%), 25%)

    pre, pre[class*='language-']
      background transparent

    &::before
      color rgba(255, 255, 255, 0.4)

    &.line-numbers-mode
      .highlight-lines .highlighted:before
        background darken(saturate($darkCodeBgColor, 10%), 25%)

      .line-numbers-wrapper
        color rgba(255, 255, 255, 0.3)

      &::after
        border-right 1px solid darken(saturate($darkCodeBgColor, 10%), 35%)

  .code-group-nav
    background-color darken(saturate($darkCodeBgColor, 10%), 35%)

  .code-group-nav-tab
    &:hover
      background-color darken(saturate($darkCodeBgColor, 10%), 5%)

    &.active
      border-bottom 0
      background-color $darkCodeBgColor

      &:before
        background radial-gradient(12px at left top, transparent 50%, $darkCodeBgColor 50%)

      &:after
        background radial-gradient(12px at right top, transparent 50%, $darkCodeBgColor 50%)
